import LoginStore from '../../../store/Login/index';
import { useState, useEffect } from 'react';
import { GetAllArticleByUserId,ParseCard } from '../../../api/Home/index';
import { Empty, Row, Col, Modal,Tag } from 'antd';
import MarkdownToJsx from '../../MarkdownToJsx/MarkdownToJsx';

const ParseCardData=({userId,seriesId})=>{

    console.log(',',userId,seriesId);
    

    const [CardData,setCardData]=useState({});//卡片数据

    useEffect(()=>{
        ParseCard(userId,seriesId).then(({data})=>{
            setCardData(data.data);
        })
    },[]);//依赖userId,seriesId

    return (
        <>
            <p><span style={{color:"blue"}}><Tag color="magenta" onClose={() => {
                            console.log('close');
                        }}>
                            {CardData.column}
                        </Tag></span><span style={{marginLeft:'1px'}}>{CardData.cate}</span></p>
        </>
    );

}

const AllArticleList = ({ status }) => {

    const [articleDetail, setArticleDetail] = useState({});//当前显示文章详情数据

    const { userInfo } = LoginStore();//用户身份信息

    const [articleList, setArticleList] = useState([]);//文章列表数据

    useEffect(() => {
        GetAllArticleByUserId(userInfo.id).then(({ data }) => {//获取用户文章
            // console.log('user-Article-Data',data.data);
            setArticleList(data.data);
        })
    }, []);

    const [isArticleDetailModalOpen, setIsArticleDetailModalOpen] = useState(false);//文章详情Modal开关状态

    const showArticleDetailModal = (item) => {//开启Modal函数

        //console.log('current-article',item);

        setArticleDetail(item);


        setIsArticleDetailModalOpen(true);
    };
    const handleArticleDetailOk = () => {//确认Modal函数
        setIsArticleDetailModalOpen(false);
    };
    const handleArticleDetailCancel = () => {//取消Modal函数
        setIsArticleDetailModalOpen(false);
    };

    if (status) {
        return (
            <>
                <Modal
                    width={1200}
                    title={articleDetail.title}
                    closable={{ 'aria-label': 'Custom Close Button' }}
                    open={isArticleDetailModalOpen}
                    onOk={handleArticleDetailOk}
                    onCancel={handleArticleDetailCancel}
                >
                    <MarkdownToJsx content={articleDetail.content} />
                </Modal>
                {
                    articleList.length === 0 ?
                        <Empty description={<p>暂无数据,赶紧滚去发文章,你不发文章我怎么赚广告费</p>}
                        /> :
                        <Row style={{ marginTop: '20px' }}>
                            {articleList.map((item) => {
                                return (
                                    <Col
                                        key={item.id}
                                        span={7}
                                        style={{
                                            marginLeft: '10px',
                                            marginTop: '10px'
                                        }}
                                        onClick={() => { showArticleDetailModal(item) }}
                                    >
                                        <div style={{ width: '100%', height: '100px', backgroundColor: 'pink', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                            <p style={{ color: "white" }}>{item.title}</p>
                                        </div>
                                        <div style={{ border: "1px solid pink",padding:"5px" }}>
                                            <p style={{ lineHeight: '50px' }}>{item.title}</p>
                                            <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                                <ParseCardData userId={userInfo.id} seriesId={item.seriesId}/>
                                                <p>{`${item.createTime.split('T')[0]} ${item.createTime.split('T')[1]}`}</p>
                                            </div>
                                        </div>
                                    </Col>
                                )
                            })}
                        </Row>
                }
            </>
        );
    }
}
export default AllArticleList;

